<template>
  <Layout ref="mgr" class="layout">
    <Header class="head">
      <span class="logo">XS Tech</span>
      <Dropdown trigger="click" @on-click="myInfoDropdownClick">
        <div>
          <Avatar class="avatar" :src="avatarSrc" size="large"/>
          <span class="userName">{{ shouUserName }}</span>
        </div>
        <template #list>
          <DropdownMenu>
            <DropdownItem name="myInfo">
              <div class="username-dropdown-item">个人信息</div>
            </DropdownItem>
            <DropdownItem name="logout">
              <div class="username-dropdown-item">退出登陆</div>
            </DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
    </Header>
    <Layout>
      <Sider class="side-bar">
        <Menu theme="light" width="auto">
          <Submenu v-for="menu of menus" :name="menu.code">
            <template #title>
              <!--              todo 菜单图标待添加-->
              <!--              <Icon type="ios-navigate"></Icon>-->
              {{ menu.showName }}
            </template>
            <MenuItem v-for="childrenMenu of menu.children" :name="childrenMenu.code" :to="childrenMenu.routerPath">
              {{ childrenMenu.showName }}
            </MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout class="page">
        <Header class="page-head">
          <Icon v-if="showBackBtn" class="page-head-back" @click="back" type="md-arrow-round-back" size="25"/>
          <span class="title">{{ pageTitle }}</span>
        </Header>
        <RouterView class="page-content" ref="routerView" @setHeadTitle="setHeadTitle"
                    @setShowBackBtn="setShowBackBtn"/>
      </Layout>
    </Layout>
  </Layout>
</template>

<script>
import {getCurrUser} from "@/api/sys/user";
import {logout} from "@/api/auth/auth";
import {Message} from "view-ui-plus";
import {loadDynamicRoutes} from "@/router";
import storage from "@/config/storage";
import {loadRolePermission} from "@/util";

export default {
  name: "Mgr",
  data() {
    return {
      avatarSrc: '',
      user: {},
      showBackBtn: false,
      shouUserName: "",
      pageTitle: "",
      menuMap: new Map(),
      menus: [],
    }
  },
  watch: {
    $route(to, from) {
      this.pageTitle = to.meta.pageTitle
      this.showBackBtn = false
    }
  },
  created() {
    getCurrUser().then(res => {
      this.user = res.data
      let avatarUrl = this.user.avatarUrl;
      if (avatarUrl && avatarUrl !== '') {
        this.avatarSrc = this.$fileBaseUrl + avatarUrl
      } else {
        this.avatarSrc = this.$webBaseUrl + "/system/myInfo/defaultAvatar.png"
      }
      this.setShowName();
    })
    loadRolePermission()
    this.buildMenus();
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    setHeadTitle(title) {
      this.pageTitle = title
    },
    setShowBackBtn(showBackBtn) {
      this.showBackBtn = showBackBtn
    },
    buildMenus() {
      let menusJson = storage.getItem("menus");
      if (!menusJson) {
        loadDynamicRoutes().then(() => {
          let menusJson = storage.getItem("menus");
          let menus = JSON.parse(menusJson)
          this.menus = this.buildMenusTree(menus)
          this.pageTitle = ""
          let currMenu = this.menuMap.get(this.$route.path)
          if (currMenu && currMenu.showName && currMenu.showName != '') {
            this.pageTitle = currMenu.showName
          }
          this.$router.push({
            path: this.$route.path,
            query: this.$route.query,
          })
        })
      } else {
        let menus = JSON.parse(menusJson)
        this.menus = this.buildMenusTree(menus)
        this.pageTitle = this.menuMap.get(this.$route.path).showName
      }
    },
    buildMenusTree(menus) {
      let tree = [];
      for (let f of menus) {
        this.menuMap.set(f.routerPath, f);
        if (!f.fatherCode) {
          tree.push(f)
        }
        for (let c of menus) {
          if (f.code == c.fatherCode) {
            let children = f.children
            if (!children) {
              children = []
              f.children = children
            }
            children.push(c)
          }
        }
      }
      return tree;
    },
    setShowName() {
      let showName = this.user.nickName
      if (!showName || showName == '') {
        showName = this.user.realName;
      }
      if (!showName || showName == '') {
        showName = this.user.userName;
      }
      this.shouUserName = showName;
    },
    myInfoDropdownClick(name) {
      switch (name) {
        case 'logout': {
          this.logout()
          break
        }
        case 'myInfo': {
          this.$router.push('/system/user/myInfo')
          break
        }
      }
    },
    logout() {
      logout().then(() => {
        Message.success("退出登陆成功")
      }).finally(() => {
        storage.clear()
      })
      this.$router.push("/login")
    }
  }
}
</script>

<style lang="less" scoped>

.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  height: 100vh;

  .head {
    background: linear-gradient(90deg, #1d42ab, #2173dc, #1e93ff);
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .logo {
      font-weight: bold;
      font-size: 2em;
    }

    .userName {
      margin-left: 10px;
      margin-right: 10px;
      font-size: 1.2em;
      font-weight: 550;
    }

    .ivu-dropdown-item {
      width: 130px;

      .username-dropdown-item {
        font-size: 1.2em;
        text-align: center;
        width: 100%;
      }
    }

  }

  .side-bar {
    background-color: white;
  }

  .page {
    margin: 10px;

    .page-head {
      background: white;
      padding-left: 10px;
      height: 50px;
      line-height: 50px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      .page-head-back {
        margin-left: 10px;
      }

      .title {
        font-size: 1.2em;
        margin-left: 10px;
      }
    }

    .page-content {
    }

  }

}

.avatar {
  background: white;
}

</style>
